<template>
    <li 
        class="my-dropdown-menu-item"
        :class="{'my-dropdown-item-divided': divided}" 
        @click="handleClick">
        <slot></slot>
    </li>
</template>
<script>
    import minxin from "@/utils/mixins"
    import { prefixCls } from '../prefix'
    export default {
        name: `${prefixCls}DropdownItem`,
        componentName: `${prefixCls}DropdownItem`,
        mixins: [minxin],
        props: {
            value: {
                type: [String, Number, Object],
                default: ''
            },
            divided: Boolean
        },
        methods: {
            handleClick() {
                this.dispatch(this.$parent, 'mjDropdown', 'menu-item-click', this.value)
            }
        },
    };
</script>
<style>
    .my-dropdown-menu-item {
        min-width: 100px;
        list-style: none;
        line-height: 32px;
        padding: 0 10px;
        margin: 0;
        font-size: 14px;
        color: #606266;
        cursor: pointer;
        outline: 0;
    }

    .my-dropdown-menu-item:hover,
    .my-dropdown-menu-item:focus {
        background-color: #f3f3f3;
    }
    .my-dropdown-item-divided {
        position: relative;
        margin-top: 5px;
    }

    .my-dropdown-item-divided:before{
        content:"";
        width: 100%;
        position: absolute;
        left: 0;
        top: -3px;
        height: 1px;
        border-top: 1px solid #ebeef5;
    }
</style>
